---
title: CopyButton
description: A button component that copies text to clipboard with visual feedback and accessibility features for enhanced user experience.
---
import { Default } from "./copy-button.examples"

## Overview

The CopyButton component provides a simple way to copy text to the clipboard with visual feedback. It's designed to extend the base Button component with built-in copy functionality, proper accessibility support, and analytics tracking capabilities.

## Usage

```tsx
import { CopyButton } from "@unkey/ui";

export default function MyComponent() {
  return (
    <div>
      <CopyButton value="Text to copy" />
      <CopyButton 
        value="API Key" 
        variant="ghost" 
        src="api-key-display" 
      />
    </div>
  );
}
```

## Examples

### Basic Usage
Different usage patterns and variants of the CopyButton component.

<Default />

## Features

- **Visual Feedback**: Icon changes from TaskUnchecked to TaskChecked on copy
- **Accessibility**: Full screen-reader support with ARIA labels
- **Auto Reset**: Automatically resets after 2 seconds
- **Button Integration**: Extends ButtonProps for full customization
- **Analytics Support**: Optional src prop for tracking
- **Event Prevention**: Prevents event propagation to parent elements
- **TypeScript Support**: Full TypeScript support with proper typing
- **Toast Message Support**: Optional toastMessage prop (default is "Copied to clipboard")

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | **Required** | The text content to be copied to clipboard |
| `src` | `string?` | `undefined` | Optional source identifier for analytics tracking |
| `toastMessage` | `string?` | `undefined` | Custom toast message to show when copied successfully |
| `variant` | `ButtonVariant` | `"outline"` | Button variant (outline, ghost, primary, etc.) |
| `className` | `string?` | `undefined` | Additional CSS classes to apply to the button |



## Variants
The component accepts all standard Button props.

## Structure

The CopyButton component is a specialized button that:

1. **Renders as Button**: Uses the base Button component for styling and behavior
2. **Copy Functionality**: Handles clipboard operations with visual feedback
3. **State Management**: Manages copy state and auto-reset functionality
4. **Analytics Integration**: Optionally tracks copy events

## Styling

The component includes default styling:

- Fixed dimensions: `w-6 h-6` (24x24px)
- Focus states: `focus:ring-0 focus:border-grayA-6`
- Icons: Full-size icons with `w-full h-full`
- Default variant: `outline` for subtle appearance
- Customizable through className prop

### Custom Styling

You can customize the appearance using the className prop:

```tsx
<CopyButton
  value="Custom styled button"
  className="bg-blue-100 hover:bg-blue-200 border-blue-300"
/>
```

## Accessibility

The component includes comprehensive accessibility features:

- **ARIA Label**: `aria-label="Copy to clipboard"` for screen readers
- **Screen Reader Text**: Hidden "Copy" text for additional context
- **Title Attribute**: `title="Copy to clipboard"` for tooltip on hover
- **Focus Management**: Proper focus states with `focus:ring-0 focus:border-grayA-6`
- **Keyboard Support**: Full keyboard navigation support inherited from Button component